<template>
  <div class="mt-6">
    <div class="grid grid-cols-3 gap-2">
      <div class="col-start-2">
        <button @click="$emit('direction-change', 'up')" class="w-full h-16 bg-dark text-light rounded-lg flex items-center justify-center text-2xl hover:bg-primary/80 transition-colors">
          <i class="fa fa-arrow-up"></i>
        </button>
      </div>
      <div class="col-start-1 row-start-2">
        <button @click="$emit('direction-change', 'left')" class="w-full h-16 bg-dark text-light rounded-lg flex items-center justify-center text-2xl hover:bg-primary/80 transition-colors">
          <i class="fa fa-arrow-left"></i>
        </button>
      </div>
      <div class="col-start-2 row-start-2">
        <button @click="$emit('direction-change', 'right')" class="w-full h-16 bg-dark text-light rounded-lg flex items-center justify-center text-2xl hover:bg-primary/80 transition-colors">
          <i class="fa fa-arrow-right"></i>
        </button>
      </div>
      <div class="col-start-2 row-start-3">
        <button @click="$emit('direction-change', 'down')" class="w-full h-16 bg-dark text-light rounded-lg flex items-center justify-center text-2xl hover:bg-primary/80 transition-colors">
          <i class="fa fa-arrow-down"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['direction-change'])
</script>

<style scoped>
.bg-dark {
  background-color: #111;
}
.text-light {
  color: #f5f5f5;
}
.bg-primary {
  background-color: #4CAF50;
}
.transition-colors {
  transition: background-color 0.2s ease;
}
</style>
    